<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位属性</title>
		<style>
			/*div宽高一致 300px*300px，圆，文本放大：10em，垂直居中
			每个圆添加一个颜色
			*/
		   span{
		   	width: 300px;
		   	height: 300px;
		   	border-radius:50%;
			font-size: 10em;
		   	text-align: center;
			line-height: 300px;
		   	color:#fff;
			/*网页阴影：1.滤镜：下阴影 2.文本阴影 3.盒子阴影*/
			/*属性值：x y 模糊半径 阴影半径 颜色 内外阴影 inset*/
			box-shadow: 5px 5px 50px 50px #77ffb4 inset;
			/*浮动定位：float属性：none|left|right;*/
			float: left;
		   }
		   span.d1{
			   background-color: aliceblue;
		   }
		   span.d2{
		   		background-color: antiquewhite;
				clear: left;
				
		   }
		   span.d3{
		   		background-color: aqua;	   
				/*clear清除浮动：left|right|both;直接作用在浮动元素上*/
				clear: left;
		   }
		   span.d4{
		   		background-color: beige;	   
		   }
		   span.d5{
		   		background-color: bisque;	   
		   }
		</style>
	</head>
	<body>
		<!-- 什么是定位？ 页面元素通过“定位方式”指定具体位置 
		    定位方式5种：1.普通流定位|文档流定位：页面元素分为：块、行、行内元素，按照元素特点定位元素
		                2.浮动定位：页面上的左右布局，可以让元素飘起来，飘起来元素转块元素
						3.相对定位：相对于父级元素进行定位，没有父级，按照body定位
						            元素不脱离文档流
						4.绝对定位：相对于父级元素将进行定位，没有父级，按照页面左顶角定位
						            元素脱离文档流
						  堆叠属性z-index属性：属性值   999
						5.固定定位：广告接口固定在页面右下角，position:fiexed:
		-->
		<span class="d1">1</span>
		<span class="d2">2</span>
		<span class="d3">3</span>
		<span class="d4">4</span>
		<span class="d5">5</span>
		
		<p>lorem</p>  <p>lorem</p>
	</body>
</html>